<template>
    <div class="container">
        <el-row style="height: 100%; align-items: center;">
            <el-col class="col-1 iconfont icon-mulu" :span="8" />
            <el-col class="col-2" :span="8">{{ title }}</el-col>
            <el-col class="col-3 iconfont icon-jiantou" :span="8" />
        </el-row>

    </div>
</template>

<script setup lang="ts">
const props = defineProps({
    title: String,
})

</script>

<style lang="scss" scoped>
.container {
    width: 200px;
    height: 60px;
    background-color: rgba(0,0,0, 0.8);
    border-radius: 10px;
    .col-1{
        padding-left: 10px;
        font-size: 22px;
    }
    .col-3{
        text-align: end;
        padding-right: 10px;
    }

}
.container:hover {
    cursor: pointer;
    background-color: rgba(0,0,0, 0.6);
}
</style>
